﻿@{
    ViewBag.Title = "仪表盘";
    var index = 1;
}

<div class="row  border-bottom white-bg dashboard-header">
    <div class="row">
        <div class="col-lg-12">
            <h2>本周指标</h2>
        </div>
        <div class="col-lg-3">
            <div class="widget style1">
                <div class="row">
                    <div class="col-xs-4 text-center">
                        <i class="fa fa-trophy fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 累积关注数 </span>
                        <h2 class="font-bold">@ViewBag.UserSummaryCount</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="widget style1 navy-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-plus fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 新关注数 </span>
                        <h2 class="font-bold">@ViewBag.NewUserCount</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="widget style1 lazur-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-times fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 取消关注数 </span>
                        <h2 class="font-bold">@ViewBag.CancelUserCount</h2>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="widget style1 yellow-bg">
                <div class="row">
                    <div class="col-xs-4">
                        <i class="fa fa-line-chart fa-5x"></i>
                    </div>
                    <div class="col-xs-8 text-right">
                        <span> 净增用户数 </span>
                        <h2 class="font-bold">@ViewBag.GrowUserCount</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-3">
            <h2>最新关注</h2>
            <small>最新关注用户。</small>

            <ul class="list-group clear-list m-t">

                @foreach (var item in (ViewBag.Last5Users as List<Magicodes.WeiChat.Models.HomeUserViewModel>))
                {
                    <li class="list-group-item fist-item">
                        <span class="pull-right">
                            @item.SubscribeTime
                        </span>
                        <span class="label label-@item.Style">@index</span> @item.NickName
                    </li>
                    {
                        index++;
                    }
                }

            </ul>
        </div>
        <div class="col-sm-9">
            @if (ViewBag.ChartEnable)
            {
                <div class="flot-chart dashboard-chart" style="height:280px;">
                    <div data-bind='component:{name: "echart",params: { ajaxUrl: "/home/UserTimeChart" }}' style="height:280px;width:100%"></div>
                </div>
            }
            else
            {
                <div class="well">
                    <h3>因性能问题，部分图表已禁用。</h3>
                    PS:当关注的粉丝量过大时（超过20万粉），会出现此信息。
                </div>
            }
        </div>
    </div>
    <div class="row">
        @if (ViewBag.ChartEnable)
        {
            <div class="flot-chart dashboard-chart" style="height:280px;">
                <div data-bind='component:{name: "echart",params: { ajaxUrl: "/home/UserAreaChart" }}' style="height:280px;width:100%"></div>
            </div>
        }
        else
        {
            <div class="well">
                <h3>因性能问题，部分图表已禁用。</h3>
                PS:当关注的粉丝量过大时（超过20万粉），会出现此信息。
            </div>
        }
    </div>
</div>


@section Scripts {
    @Scripts.Render("~/plugins/peity")
    @Scripts.Render("~/plugins/echarts")
    <script>
        $(function () {
            ko.applyBindings({}, document.getElementById('mainBody'));
        });
    </script>
}